<template>
	<div class="login_face">
		<div class="login_box">
 
			<div class="img_box"></div>
			<!-- 登录表单 -->
			<div class="login_msg">
				<!-- 账号输入框 -->
				<el-input placeholder="请输入账号/手机号" v-model="names" clearable id="account"></el-input>
				<!-- 密码输入框 -->
				<el-input placeholder="请输入密码" v-model="password"  id="password" show-password></el-input>
				<!-- 登录按钮 -->
				<el-button id="btn" type="primary" @click="login()">登录</el-button>
			</div>
			
		</div>
	</div>
</template> 
<script>
	/* 导出组件,并为组件定义数据,函数,生命周期函数 */
    import {logins} from '@/api/test'
	export default {
		data() {
			return {
				names: '',
				password: '',
                number:''
			}
		},
		methods: {
			login() {
            
           
				if (this.names.length == 0) {
					this.$message({
						message: '账号不能为空!',
						type: 'warning'
					});
					return;
				}
				if (this.password.length == 0) {
					this.$message({
						message: '密码不能为空!',
						type: 'warning'
					});
					return;
				}else{
					
                logins(this.names).then(res=>
        {
			console.log(res.rows);
		  const firstRow = res.rows;
		  const s =new Date(Date.now()+1000*1000)
      if ( res.msg === "查询成功") {
        this.$message({
						message: '密码与账户正确!',
						type: 'success'});
						// String将其转换成字符串
						 this.$cookie.set('user', String(firstRow.name)); 
						 this.$cookie.set('pas',String(firstRow.pas))
						this.$router.push('/')
						
      } 
	  else {
	
        this.$message({
						message: '检查密码或用户是否正确!',
						type: 'warning'});
      }
			// if(test.name===this.names&&test.pas===this.password){
			// 	alert("dui")

			// }else{
			// 	alert("cuo")
			// }

		}
                )
				}
			}
		}
	}
</script>
 
<style>
	.login_msg{
		width: 400px;
		height: 300px;
		margin: auto;
		margin-top: 25px;
		/* background-color: lightcyan; */	
	}
	#account,#password,#number{
		width:400px;
		height: 50px;
		margin: 15px;
		margin:15px 0;
		background: rgba(255, 255, 255, 0.65);
		border-radius: 25px;
	}
	#btn{
		width: 220px;
		margin-left: 90px;
		margin-top: 25px;
		border-radius: 40px;
	}
	
	* {
		margin: 0px;
		padding: 0px;
	}
 
	.login_face {
		display: flex;
		height: 100vh;
		align-items: center;
		justify-content: center;

		background-size: cover;
	}
 
	.login_box {
		width: 550px;
		height: 450px;
		border-radius: 20px;
		background: rgba(255, 255, 255, 0.38);
	}
 
	.img_box {
		width: 130px;
		height: 130px;
		background-size: cover;
		border-radius: 50%;
		border: white solid 6px;
		opacity: 0.95;
		margin: auto;
		margin-top: -68px;
	}
</style>